<template>
	<view class="page">
		<view style="height:30upx"></view>
		<view class="select-bit" @click="handleSelectCoin">
			<view class="value">{{currentCoin && currentCoin.coin_name || '--'}}</view>
			<view class="icon">
				<text class="placeholder">{{i18n.selectCurrency}}</text>
				<text class="iconfont">&#xe600;</text>
			</view>
		</view>
		<view class="input-container" :class="{'input-focus': focus.input1}">
			<input type="text" class="input" v-model="address" :placeholder="i18n.enterAddress"  @focus="focus.input1=true" @blur="focus.input1=false"/>
			<text class="iconfont withdraw-sweep" @click="sweepCode">&#xe637;</text>
		</view>
		<view class="input-container" :class="{'input-focus': focus.input2}">
			<input type="number" class="input" v-model="num" :placeholder="i18n.withdrawNum +' '+currentCoin.min_withdraw_amount"  @focus="focus.input2=true" @blur="focus.input2=false" />
			<view class="input-right">
				<view>{{currentCoin && currentCoin.coin_name || '--'}}</view>
				<view style="margin: 0 20upx">|</view>
				<view class="theme-color" @click="selectAll">{{i18n.all}}</view>
			</view>
		</view>
		<view class="withdraw-fee">
			<view class="input-des">
				<text>{{i18n.balance}}</text>
				<text class="ml-10 black-color">{{currentCoin.money}} {{currentCoin && currentCoin.coin_name || '--'}}</text>
			</view>
			<view class="input-des">
				<text>{{i18n.fee}}</text>
				<text class="ml-10 black-color">{{currentCoin && currentCoin.withdraw_fee * 100 || '--'}}%</text>
			</view>
		</view>
		<view class="submit">
			<view class="getToNum" v-if="num">
				<view>{{i18n.arrive}}</view>
				<view >{{getMoney}} {{currentCoin && currentCoin.coin_name || '--'}}</view>
			</view>
			<button class="btn-block mt-20" @click="showAuth" hover-class="btn-hover">{{i18n.withdraw}}</button>
		</view>
		<u-popup v-model="selectCurrencyModalRef" mode="bottom" border-radius="10">
			<view class="modal-body">
				<scroll-view class="scroll-list" scroll-y="true" scroll-left="120">
					<view class="item" @click="selectCoin(item)" v-for="(item, index) in data" :key="index" v-if="item.is_withdraw">
						<view class="list-left">
							<CacheImage :src="item.image" class="btc-icon" mode="aspectFill"></CacheImage>
							<view class="list-center">
								<view class="name">{{item.coin_name}}</view>
							</view>
						</view>
						<text class="iconfont select-icon">&#xe600;</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<safetyVerification ref="safetyVerificationRef" :userInfo="userInfo" requestUrl="api/sms/common" @affirm="submit" type="withdraw"/>
	</view>
</template>

<script>
import CacheImage from '@/components/CacheImage.vue';
import verificationCode from '@/components/verificationCode.vue'
import safetyVerification from '@/components/safetyVerification2.vue'
export default {
	components: {
		verificationCode, CacheImage, safetyVerification
	},
	data() {
		return {
			focus: {
				input1: false,
				input2: false,
				input3: false,
				input4: false,
			},
			usdtType: 'OMNI',
			userInfo: {},
			currentSelect: 0, //选择的币种
			address: '',
			num: '', //转出数量
			data: [{coin_name: ''}], //所有币种
			currentCoin: {},
			navigateType: '',
			code: '',
			selectCurrencyModalRef:false
		};
	},
	onLoad(option) {
		this.navigateType = option.type;
		this.fetchCoin();
	},
	onShow(){
		this.fetchUserInfo()
		uni.setNavigationBarTitle({
		 title: this.$t('withdraw.withdraw')
		})
	},
	computed: {
		i18n() {
			return this.$t('withdraw')
		},
		getMoney() {
			if(this.currentCoin && this.currentCoin.id && this.num ){
				let s = 0
				if(this.currentCoin.withdrawal_mode === 1){
					s = Number(this.num) * (1 - Number(this.currentCoin.withdraw_fee))
				}else if(this.currentCoin.withdrawal_mode === 2){
					s = Number(this.num) - Number(this.currentCoin.withdraw_fee)
				}
				s = Math.round(s * 1000000) / 1000000
				s = s.toFixed(6)
				return Number(s)
			}else{
				return '0.00'
			}
		}
	},
	methods: {
		toggleUsdtType(type){
			this.usdtType = type
		},
		fetchUserInfo() {
			this.userInfo = this.$getStore('ucenterInfo', true)
			this.$post('api/ucenter/info')
				.then(res => {
					let userInfo = res.data
					this.userInfo = userInfo
					this.$setStore('ucenterInfo', userInfo ,true)
				})
		},
		//显示认证弹窗
		showAuth() {
			let { address, num, pwd} = this
			if(!address){
				this.$toast(this.$t('withdraw.enterWithdraw'))
			}else if(!num){
				this.$toast(this.$t('withdraw.enterNum'))
			}else{
				this.$refs.safetyVerificationRef.show()
			}	
		},
		//提交
		submit (codes){
			let {num, address} = this
			let coin_id = this.currentCoin.id
			let data = { num, address, coin_id }
			if(codes.mobile_code){
				data.mobile_code = codes.mobile_code
			}
			if(codes.email_code){
				data.email_code = codes.email_code
			}
			if(codes.ga_code){
				data.ga_code = codes.ga_code
			}
			this.$post('api/site/withdraw', data).then((res)=>{
				setTimeout(()=>{
					uni.navigateBack({
						delta: 1
					})
				}, 1200)
				this.$toast(res.msg)
			})
		},
		selectAll(num) {
			if(this.currentCoin && this.currentCoin.money){
				this.num = this.currentCoin.money
			}else{
				this.num = 0
			}
		},
		handleSelectCoin() {
			this.selectCurrencyModalRef = true
		},
		handleSelectMoney(index) {
			this.currentSelect = index;
			this.num = '';
			this.selectCurrencyModalRef = false
		},
		sweepCode() {
			// #ifdef APP-PLUS
			uni.scanCode({
				scanType: ['qrCode'],
				success: (res) => {
					this.address = res.result
				}
			});
			// #endif
			// #ifdef H5
			this.address = ''
			this.$toast('H5暂不支持扫码！')
			// #endif
		},
		selectCoin(item) {
			this.currentCoin = item
			this.selectCurrencyModalRef = false
		},
		fetchCoin() {
			this.$post('api/funds/account', {}, {
				store: 1,
				getStore: (res)=>{
					this.data = res.coins
				}
			}).then(res=>{
				if(res.code === 200){
					this.data = res.data.coins
					for(let i=0;i<res.data.coins.length;i++){
						if(res.data.coins[i].is_withdraw){
							this.currentCoin = res.data.coins[i]
							this.selectCoin(res.data.coins[i])
							break
						}
					}
				}
			})
		},
	}
};
</script>

<style lang="less" scoped>
.type {
		padding:20upx 0;
		margin-top: 20upx;
		.title {
			font-size: 32upx;
			font-weight: bold;
		}
		.type-btn-group {
			display: flex;
			align-items: center;
			margin-top: 20upx;
		}
		.type-btn {
			width: 140upx;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			border: 1upx solid var(--border);
			border-radius: 10upx;
			color: var(--txt-color);
		}
		.type-btn.active {
			border-color:var(--theme-color);
			color: var(--theme-color);
		}
	}
.scroll-list {
		height: 600upx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 30upx;
			margin-right: 30upx;
			border-bottom: 1upx solid var(--border);
			height: 120upx;

			.select-icon {
				font-size: 24upx;
			}

			.list-left {
				display: flex;
				align-items: center;
			}

			.list-center {
				margin-left: 30upx;

				.name {
					font-size: 28upx;
					font-weight: 400;
				}
			}
		}
	}

	.btc-icon {
		width: 60upx;
		height: 60upx;
	}

	.modal-body {

	}

.submit {
	margin-top: 40upx;
	.getToNum {
		display: flex;
		justify-content: space-between;
		color: var(--txt-color);
		font-size: 28upx;
	}
}
.input-des {
	font-size: 28upx;
	color: var(--txt-color);
	font-weight: 500;
	display: flex;
	margin-top: 30upx;
}
.input-container {
	border-bottom: 1upx solid var(--border);
	display: flex;
	align-items: center;
	height: 100upx;
	transition: border-bottom-color ease .3s;
	margin-top: 30upx;
	&.input-focus{
		border-bottom-color: var(--theme-color);
	}
	.input {
		flex: 1;
		font-size: 28upx;
	}
	input {
		flex:1;
	}
	.input-right {
		display: flex;
		align-items: center;
		color: var(--theme-color);
		font-size: 28upx;
		font-weight: bold;
	}
}
.select-bit {
		height: 100upx;
		border: 1upx solid var(--border);
		border-radius: 10upx;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		justify-content: space-between;

		.value {
			font-size: 30upx;
			font-weight: bold;
		}

		.icon {
			display: flex;
			align-items: center;
			color: var(--txt-color);
			font-size: 26upx;
		}

		.placeholder {
			margin-right: 20upx;
		}
	}
.page {
	padding: 0 30upx;
}
.withdraw-sweep{
	width: 100upx;
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	font-size: 32upx;
	font-weight: bold;
	color: var(--theme-color);
}
.withdraw-fee{
	display: flex;
	justify-content: space-between;
	.black-color{
		color: var(--theme-color);
	}
}
</style>
